<template>
  <a-modal
    :visible="visible3"
    title="详情"
    cancelText="取消"
    width="750px"
    okText="确定"
    @ok="submit"
    @cancel="cancel"
  >
    <!-- <a-image :src="formState.path"></a-image> -->
    <div class="title">
      <a-row>
        <a-col :span="24">收款信息</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">收款单号：{{ num }}</a-col>
      <a-col :span="8">付款类型：{{ num }}</a-col>
      <a-col :span="8">提交时间：{{ num }}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">币种：{{ num }}</a-col>
      <a-col :span="8">交易金额：{{ num }}</a-col>
      <a-col :span="8">等额人名币：{{ num }}</a-col>
    </a-row>

    <div class="content">
      <a-row>
        <a-col :span="8">收款人：{{ num }}</a-col>
        <a-col :span="8">支付方式：{{ num }}</a-col>
        <a-col :span="8">缴款账号：{{ num }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="8">缴款人：{{ num }}</a-col>
        <a-col :span="8">收款账号：{{ num }}</a-col>
        <a-col :span="8">SWIFT CODE：{{ num }}</a-col>
      </a-row>
    </div>
    <div class="title">
      <a-row>
        <a-col :span="24">负责人</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">销售负责人：{{ num }}</a-col>
      <a-col :span="8">项目负责人：{{ num }}</a-col>
      <a-col :span="8">分销人：{{ num }}</a-col>
    </a-row>
    <div class="title">
      <a-row>
        <a-col :span="24">状态</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">状态：{{ num }}</a-col>
      <a-col :span="8">付款对象：{{ num }}</a-col>
    </a-row>
  </a-modal>
  <!-- <detail :visible="state.visibleDetail" @close="closeDetail" :record="state.recordData"></detail> -->
</template>

<script>
import { defineComponent, reactive, ref, watch } from "vue";
export default defineComponent({
  props: {
    visible3: {
      type: Boolean
    },
    record: {
      type: Object
    }
  },
  emit: ["close"],
  setup(props, context) {
    watch(props, props => {
      formState.id = props.record.id;
      formState.path = props.record.path;
    });

    const formRef = ref();

    const formState = reactive({
      sort: 0,
      enable: "true"
    });

    const cancel = e => {
      context.emit("close", false);
    };

    const submit = e => {
      context.emit("close", false);
    };
    const num = ref("123");
    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token");

    const headers = {
      Authorization: token,
      "Authorization-key": tokenKey
    };

    return {
      cancel,
      submit,
      headers,
      formRef,
      num,
      formState,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };
  }
});
</script>
<style lang="less" scoped>
.title {
  color: #000;
  font-weight: 700;
}
/deep/.ant-col {
  padding: 10px 0;
}
.content {
  margin: 0px -10px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px dashed #d1d1d1;
}
</style>
